<template>
  <div>
    <!-- 磨皮散粉页 -->
    <div class="main">
      <div class="main-left">
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/" class="breadcrumb">
          <el-breadcrumb-item v-for="item in $route.meta.nav" :key="item">
            {{ item }}
          </el-breadcrumb-item>
        </el-breadcrumb>
        <div ref="datalist">
          <div class="img-small">
            <div>
              <img
                src="https://sdcdn.io/mac/cn/mac_sku_NY3G01_1x1_0.png?width=320&height=320"
                alt=""
              /><br />
            </div>
            <div>
              <img
                src="https://sdcdn.io/mac/cn/mac_sku_NY3G01_1x1_1.png?width=320&height=320"
                alt=""
              />
            </div>
          </div>
          <div class="img-big">
            <img :src="datalist.cover" alt="" />
          </div>
        </div>
      </div>
      <div class="main-right">
        <div class="title">
          <h1>{{ datalist.title }}</h1>
          <p>STUDIO FIX PRO SET + BLUR WEIGHTLESS LOOSE POWDER</p>
          <div>
            <span class="back1"></span>
            <span class="back2"></span>
            <span class="back3"></span>
          </div>
          <div class="select-color">ROSY PINK</div>
          <h3>
            {{ datalist.price }}
            <span>6.5G</span>
          </h3>
          <div>
            <el-select>
              <el-option label="Rosy Pink" value="1"></el-option>
              <el-option label="Light" value="2"></el-option>
            </el-select>
          </div>
          <el-button class="shopping-cart">加入购物车</el-button>
          <div class="guarantee">
            <h4>免费运输与退换。</h4>
            <p>任购免邮</p>
            <p>何时送达？</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 商品详情描述 -->
    <div class="product-detail">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="成分表" name="first">
          &lt;成分&gt;：["CI
          77019"，"聚甲基倍半硅氧烷"，"合成氟金云母"，"硅石"，"聚二甲基硅氧烷"，"脱氢乙酸钠"，"乙基己基甘油"，"辛甘醇"，"CI
          77891"，"季戊四醇四（乙基己酸）酯"，"二异硬脂醇苹果酸酯"，"氢化卵磷脂"，"三乙氧基辛基硅烷"，"CI
          77742"，"CI 77007"，"CI
          77491"，"高岭土"，"氧化锡"，"生育酚（维生素E）"]</el-tab-pane
        >
        <el-tab-pane label="使用方法" name="second">
          用粉扑从网膜上蘸取适量散粉，轻拍在面部，并向外打圈完成定妆，从而达到无瑕妆效。</el-tab-pane
        >
        <el-tab-pane label="商品标签信息" name="three"
          >品牌：MAC / 魅可<br />产品名称：魅可定制无瑕轻盈散粉01<br />
          产地：韩国<br />保质期见包装<br />&lt;使用方法&gt;：用粉扑从网膜上蘸取适量散粉，轻拍在面部，并向外打圈完成定妆，从而达到无瑕妆效。<br />批准/备案文号：国妆网备进字（沪）2022003720<br />
          经销商企业名称和地址：雅诗兰黛（上海）商贸有限公司；上海市闵行区金都路3688号301、302、306室<br
        /></el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      datalist: {},
      products: {},
      activeName: 'first',
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
  },
  mounted() {
    console.log(this.$route)
    let params = { pid: 40 }
    this.$http.productApi.queryById(params).then(res => {
      this.products = res.data.data
      // console.log(res)
      console.log(res.data.data)
      this.datalist = res.data.data
    })
  },
}
</script>

<style lang="scss" scoped>
.main {
  width: 1400px;
  margin: 40px auto;
  display: flex;
  div.main-left {
    width: 800px;
    height: 700px;
    div {
      height: 120px;
      display: flex;
      justify-content: flex-start;
      div.img-small {
        display: flex;
        flex-wrap: wrap;
        margin: -60px 0 0 60px;
        div {
          width: 50px;
          height: 50px;
          &:hover {
            border: 1px solid gray;
          }
          img {
            display: inline-block;
            width: 50px;
            height: 50px;
          }
        }
      }
      div.img-big {
        margin-top: -20px;
        width: 690px;
        height: 690px;
        img {
          width: 690px;
          height: 690px;
        }
      }
    }
  }
  div.main-right {
    width: 620px;
    height: 660px;
    margin-left: 40px;
    .title {
      margin-top: 50px;
      h1 {
        font-size: 28px;
      }
      p {
        font-size: 15px;
      }
      div {
        span {
          margin: 20px 0;
          display: inline-block;
          width: 128px;
          height: 128px;
        }

        span.back1 {
          background-color: #d6bcc7;
          &:hover {
            border: 2px solid black;
          }
        }

        span.back2 {
          background-color: #dac6bb;
          &:hover {
            border: 2px solid black;
          }
        }
        span.back3 {
          background-color: #d4c9d9;
          &:hover {
            border: 2px solid black;
          }
        }
      }
      .select-color {
        margin-top: 120px;
        font-size: 12px;
      }
      h3 {
        margin-top: -20px;
        font-weight: 400;
        color: orangered;
        font-size: 14px;
        span {
          color: $black;
          font-size: 12px;
        }
      }
      div {
        width: 512px;
        height: 45px;
        input {
          height: 100%;
          width: 100%;
        }
      }
      .shopping-cart {
        height: 60px;
        border-radius: 0;
        background-color: $black;
        width: 512px;
        margin-top: 10px;
        color: white;
        &:hover {
          color: #aaa;
        }
      }
      .guarantee {
        text-align: center;
        line-height: 30px;
        h4 {
          margin-top: 30px;
        }
      }
    }
  }
}
div.product-detail {
  width: 1400px;
  margin: 100px auto;
  div {
    margin: 20px 0;
  }
}
</style>
